<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
    <link rel="stylesheet" href="../libs/animate.css" />
    <style>
      .box {
        width: 200px;
        height: 200px;
        background: darkgoldenrod;
        color: #dfdfdf;
      }
      table {
        border: 1px solid #999;
        background: coral;
        color: #fff;
      }
      tr td {
        border: 1px solid #999;
        padding: 10px;
      }
      ul {
        background: brown;
        width: 40%;
        list-style: none;
      }
      .zoom-enter-active {
        animation: zoomInDown 1s;
      }
      .zoom-leave-active {
        animation: zoomOutDown 1s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <h2>msg == {{msg}}</h2>
      <m-head></m-head>
      <hr />
      <select v-model="cptname">
        <option value="mytable">表格展示</option>
        <option value="mylist">列表展示</option>
      </select>
      <keep-alive>
        <transition name="zoom" mode="out-in">
          <component :is="cptname" :cars="cars"></component>
        </transition>
      </keep-alive>
    </div>
    <template id="mytable">
      <table>
        <thead>
          <tr>
            <td>序号</td>
            <td>品牌</td>
            <td>型号</td>
            <td>颜色</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(l,k,i) in cars " :key="i">
            <td>{{i+1}}</td>
            <td>{{l.brand}}</td>
            <td>{{l.model}}</td>
            <td>{{l.color}}</td>
          </tr>
        </tbody>
      </table>
    </template>
    <template id="mylist">
      <ul>
        <li v-for="(l,k,i) in cars" :key="i">
          <p>序号{{i+1}}</p>
          <p>品牌{{l.brand}}</p>
          <p>型号{{l.model}}</p>
          <p>颜色{{l.color}}</p>
        </li>
      </ul>
    </template>
    <script>
      const bus = new Vue();
      Vue.component("mHead", {
        template: "<header> Head - Head -wh2116 daydyaup </header>",
      });
      var cars = {
        car01: { brand: "Ford", model: "Mustang", color: "red" },
        car02: { brand: "Fiat", model: "500", color: "white" },
        car03: { brand: "Volvo", model: "XC90", color: "black" },
      };
      Vue.component("mytable", {
        template: "#mytable",
        data() {
          return {};
        },
        props: ["cars"],
        mounted() {
          console.log("组件载入");
        },
        activated() {
          console.log("组件已经激活了");
        },
        deactivated() {
          console.log("组件失去活力了");
        },
      });
      Vue.component("mylist", {
        template: "#mylist",
        props: ["cars"],
      });
      const vm = new Vue({
        data: {
          title: "Vue 动态组件切换",
          msg: "小型、独立和通常可复用的组件构建大型应用",
          cars: cars,
          flag: true,
          cptname: "mytable",
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
  </body>
</html>
